<template>
<div>
  <ylheader :title="'发现'" :leftsvg="true" ></ylheader>
  <div class="banner">
    <img class="banner-img" :src="data.pic"/>
    <div class="title-join">
      <span class="title">{{data.name}}</span>
      <div class="join-btn" v-if="data.isJoin == 0" @click="Join"><span>加入</span></div>
      <div class="join-btn" v-if="data.isJoin == 1" @click="cancelJoin"><span>退出</span></div>
    </div>
  </div>
  <div class="desc">圈子简介：{{data.introduction}}</div>
  <div class="content">
    <div class="nav">
      <div class="nav-item" @click="changetab(1)">
        <div class="nav-name " :class="{on:tab&&value==1}">最新</div>
        <div class="line" v-if="value == 1"></div>
      </div>
      <div class="nav-item" @click="changetab(2)">
        <div class="nav-name" :class="{on:tab&&value==2}">最热</div>
        <div class="line" v-if="value == 2"></div>

      </div>
    </div>
    <div style="background-color: white;padding-bottom: 1.85rem;min-height:80vh;">
      <div class="comment" v-for="(items,index) in commentList" :key="index">
        <hotheader :discuessTime="true" :commentindex="index" :type="1" :nickname="items.nickName" :saytime="items.gmtCreate" :avatarimg="items.headImg" :place="items.park" :userType="items.userType" :isTalent="items.isTalent" :pendantType="items.pendantType" :pendantPicUrl="items.headImg"></hotheader>

        <!--<commentdetailheader :zannum="items.likeNum" :avaterImg="items.headImg" :name="items.nickName" :time="items.timeStamp" :commentindex="index"
                             :commentdetailisup="items.isLike" @comentdetailthumb="iscomentdetailthumb" @replycomment="replyother" :userType="items.userType" :isTalent="items.isTalent" :pendantType="items.pendantType" :pendantPicUrl="items.pendantPicUrl"></commentdetailheader>-->
        <commentbody :atname="items.atName" :commenttype="items.atName" :commenttext="items.content"
                     :piclength="changeStrtoArr(items.pics).length"   :picarray="changeStrtoArr(items.pics)" @replycomment="replyother" :commentindex="index" @showImg="popupImg"></commentbody>
        <div style="border-bottom: 1px solid #f5f5f5;">
          <div v-for="(each,idx) in items.circleDiscussCommentList" style="padding: 0.1rem 0.3rem;">
            <div>
              <span style="color: #3fa7fb;">{{each.nickName}}：<i v-if="each.beCircleDiscussCommentUserId>0" style="color:red">@{{each.beNickName}}</i></span>
              <span>{{each.content}}</span>
            </div>
            <div style="display: flex; flex-wrap: wrap; margin: 0.2rem 0 0 -0.15rem;" v-if="each.pics">
              <img v-for="(one,id) in (each.pics.split(','))"  @click="popupImg(selectimg(each),id)" v-lazy.container ="one" style="width: 2.2rem; height: 1.7rem; margin-left: 0.15rem;" />
            </div>
          </div>
          <div style="color: #3fa7fb; padding: 0.1rem 0.3rem 0.2rem 0.3rem;" v-if="items.commentNum > 0"  @click="saycomment(items)">共{{items.commentNum}}条回复 ></div>
        </div>



        <thubm-up :topiccommentnum="items.commentNum" :thumbupnum="items.likeNum" :commentindex="index" :isup="items.isLike" @thumbup="saythumbup" @commentsvgg="saycomment(items)"></thubm-up>

      </div>
    </div>

    <!--<ul>
      <li class="comment-item" v-for="(item,index) in commentlist" :key="index">
        <div class="info">
          <div class="user">
            <img class="avatar" :src="item.headImg"/>
            <div class="name-time">
              <div class="name">{{item.nickName}}</div>
              <div class="time">{{item.gmtCreate}}</div>
            </div>
          </div>
          <div class="place">
            <img src="../../assets/discovery/icon-localtion.png" />
            <div>{{item.parks}}</div>
          </div>
        </div>
        <p class="comment-text">{{item.introduction}}</p>
        <div class="comment-pic">
          <img :src="item.pic"/>
        </div>
        <div class="act">
          <div class="act-item">
            <img src="../../assets/discovery/icon-prise.png">
            <span>{{item.likeNum}}</span>
          </div>
          <div class="act-line"></div>
          <div class="act-item">
            <img src="../../assets/discovery/icon-comment.png">
            <span>{{item.commentLikeNum}}</span>
          </div>
        </div>
      </li>
    </ul>-->
    <footer>
      <div class="publish-btn" @click="addcomment">发布讨论</div> 
    </footer>
  </div>
      <transition name="fade">
      <div class="modal-img" v-if="popupVisible" @click="popupVisible=false">
        <mt-swipe :auto="100000" style="width: 100%;height: 100vh;position:relative;"
        :continuous="false" 
          :defaultIndex="swiperIndex" :showIndicators="false" >
            <mt-swipe-item v-for="(item,index) in popImg" :key="index" style="height:100vh" >
              <img v-lazy="item" class="swiper-img" />
            </mt-swipe-item>
          </mt-swipe>
      </div>
    </transition>
</div>
</template>

<script>
import ylheader from "src/components/yl-header.vue";
import api from "src/api/index";
import commentbody from "src/components/comment-detail-body.vue";
import commentdetailheader from "src/components/commentdetail-header.vue";
import hotheader from "src/components/allhot-header.vue";

import { Navbar, TabItem,Indicator} from "mint-ui";
import thubmUp from "src/components/thumb-up.vue";

export default {
  name:"discoveryDetails",
  data(){
    return {
      swiperIndex:0,
      popupVisible:false,
      popImg:'',
      data:'',
      page:1,
      commentList:[],
      tab:true,
      value:1,
    }
  },
  components:{
    ylheader,commentbody,commentdetailheader,thubmUp,hotheader
  },
  mounted(){
    Indicator.open("加载中");
    this.queryDiscoveryInfo();
    this.querycirclediscussInfo(1);
  },
  methods:{
       // 整理图片为数组
    selectimg(imgarray,index){
      return imgarray.pics.split(',')
    },
    //显示图片
    popupImg(data,index){
      console.log(data,index)
      this.swiperIndex = index
      if(typeof data == 'string'){
        data = data.split(',')
      }
       //console.log(data,index)
      this.popImg = data;
      this.popupVisible = true;
      // console.log(this.swiperOne)
      // this.swiperOne.slideTo(index)
    },
    openImg(img){
      window.location.href=img;
      console.log(img)
    },
    changetab(val){
      this.value = val;
      this.tab = true;
      this.page = 1;
      this.querycirclediscussInfo(val);
    },
    tosaycomdet(data) {
      localStorage.turnCount = "detail2say";
      // this.getTransformState();

      /*this.$router.push({
        path: "/disdetail",
        query: {
          saysId: this.commentlist[data.commentindex].saysId,
          userId: this.commentlist[data.commentindex].userId,
          index: data.commentindex
        }
      });*/
    },
    replyother(data) {
      if (
        localStorage.getItem("userId") ==
        this.commentList[data.commentindex].userId
      ) {
        this.ismyself = true;
      } else {
        this.ismyself = false;
      }
      this.isreply = true;
      this.tag = data.commentindex;
      if(this.ismyself){
        const mydata = {
          type: "3",
          id: this.commentList[data.commentindex].commentId
        };
        api.Queryshenhe(mydata).then(res => {
          if (res.success) {
            if (res.data == "1") {
              this.myshenhetype = 2;
            } else if (res.data == "0") {
              this.myshenhetype = 1;
            }
          }
        });
      }
    },
    cancelJoin(){
      let params = {
        id:this.$route.query.id
      }
      api.querycirclecancalJoin(params).then(res=>{
        if(res.success){
          this.$toast("您已成功退出");
          this.queryDiscoveryInfo();
        }else{
          this.$toast("操作失败");
        }
      })
    },
    Join(){
      let params = {
        ids:this.$route.query.id
      }
      api.querycirclejoin(params).then(res=>{
        if(res.success){
          this.$toast("您已成功加入");
          this.queryDiscoveryInfo();
        }else{
          this.$toast("操作失败");
        }
      })
    },
    saythumbup(data) {
      const params = {
        circleId: this.commentList[data.commentindex].circleId,
        circleDiscussId: this.commentList[data.commentindex].id
      };
      console.log(data)
      if (this.commentList[data.commentindex].isLike == 0) {
        api.Querycirlethumbup(params).then(res => {
          if (res.success) {
            // this.$util.saveFootPrint({actType:9,typeValue:this.commentList[data.commentindex].saysId});//用户轨迹
            this.commentList[data.commentindex].isLike = 1;
            this.commentList[data.commentindex].likes = res.data;
            //更新说说缓存数据
            let sayObj = JSON.stringify({
              commentList: this.commentlist,
              totalPage: this.totalPage,
              hasmore: this.hasmore,
              pageone: this.pageone,
              pagetwo: this.pagetwo,
              mypage: this.mypage,
              timeorhot: this.timeorhot
            });
            this.$toast("点赞成功");
            this.querycirclediscussInfo(this.value);
            localStorage.sayStorage = sayObj;
          } else {
            this.$toast("点赞失败");
          }
        });
      } else if (this.commentList[data.commentindex].isLike == 1) {
        api.queryDiscoverylikecancel(params).then(res => {
          if (res.success) {
            this.commentList[data.commentindex].isLike = 0;
            this.commentList[data.commentindex].likes = res.data;
            //更新说说缓存数据
            let sayObj = JSON.stringify({
              commentList: this.commentList,
              totalPage: this.totalPage,
              hasmore: this.hasmore,
              pageone: this.pageone,
              pagetwo: this.pagetwo,
              mypage: this.mypage,
              timeorhot: this.timeorhot
            });
            this.querycirclediscussInfo(this.value);
            localStorage.sayStorage = sayObj;
            this.$toast("已取消");

          } else {
            this.$toast("取消点赞失败");
          }
        });
      }
    },
    saycomment(data) {
      // console.log(data,this.commentlist)
      localStorage.turnCount = "detail2say";
      // this.getTransformState();
     /* let commentList0 = JSON.stringify(this.commentList[data.commentindex])
      localStorage.setItem('infofo',commentList0)

      localStorage.setItem('isLike',this.commentList[data.commentindex].isLike)*/

      data.name = data.name?data.name:this.data.name;
      localStorage.setItem('infofo',JSON.stringify(data))
      localStorage.setItem('isLike',data.isLike)

      this.$router.push({
        path: "/disdetail",
        query: {
          circleId: data.circleId,
          circleDiscussId: data.id,
          index: data.commentindex

        }
      });
    },
    changeStrtoArr(str){
      if(!str) return false;
      let strArr = str.split(',');
      let newArr = [];
      for(let i=0; i<strArr.length;i++){
        newArr.push({'src':strArr[i]})
      }
      return newArr
    },

    iscomentdetailthumb(data) {
      const likeparam = {
        circleDiscussCommentId: this.commentList[data.commentindex].id,
        circleDiscussId: this.commentList[data.commentindex].userId,
        circleId: this.commentList[data.commentindex].circleId,

      };
      console.log(this.commentList)
      const canclelikeparam = {
        circleDiscussCommentId: this.commentList[data.commentindex].circleDiscussCommentId
      };
      if (this.commentList[data.commentindex].isLike == 0) {
        api.Querycirclediscussthumbup(likeparam).then(res => {
          if (res.success) {
            // this.$util.saveFootPrint({actType:10,typeValue:this.commentList[data.commentindex].commentId});//用户轨迹
            this.commentList[data.commentindex].isLike = 1;
            this.commentList[data.commentindex].likeNum = res.data;
            this.initSaycomments()

          } else {
            this.$toast("点赞失败");
          }
        });
      } else if (this.commentList[data.commentindex].isLike == 1) {
        api.Querycanclescirclediscussthumbup(likeparam).then(res => {
          if (res.success) {
            this.commentList[data.commentindex].isLike = 0;
            this.commentList[data.commentindex].likeNum = res.data;
            this.initSaycomments()

          } else {
            this.$toast("取消点赞失败");
          }
        });
      }
    },
    queryDiscoveryInfo(){
      let data = {
        id:this.$route.query.id
      }
      api.queryDiscoveryInfo(data).then(res => {
        if(res.success){
          Indicator.close();
          this.data = res.data;
        }else{

        }
      })
    },
    addcomment(){
      this.$router.push({path:'publishdis',query:{circleId:this.$route.query.id}})
    },
    querycirclediscussInfo(sort){
      let data = {
        circleId:this.$route.query.id,
        sort:sort,
        page:this.page,
        limit:30
      }
      api.querycirclediscussInfo(data).then(res => {
        if (res.success) {
          Indicator.close();
          this.commentList = res.page.list;
        } else {

        }
      })
    }
  }
}
</script>
<style scoped>
  .banner{
    width: 7.5rem;
    height: 3.52rem;
    display: flex;
    position: relative;
  }
  .banner-img{
    width: 7.5rem;
    height: 3.52rem;
    background: #999;
  }
  .title-join{
    position: absolute;
    top: 2rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.3rem;
  }
  .title{
    color: #fff;
    font-size: 0.42rem;
  }
  .join-btn{
    width: 1.3rem;
    height: 0.64rem;
    background: rgba(0,0,0,.5);
    border-radius: 0.32rem;
    color: #fff;
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.64rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .desc{
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem 0.3rem 0.4rem 0.3rem;
    background: #fff;
    border-radius: 0.32rem 0.32rem 0 0;
    margin: -0.32rem 0 0.2rem 0;
    position: relative;
    color: #999;
  }
  .content{
    width: 100%;
    background: #fff;
    padding-top: 0.32rem;
  }
  .nav{
    display: flex;
    justify-content: space-around;
  }
  .nav-item{
    text-align: center;
    height: 0.8rem;
  }
  .nav-name{
    color: #999;
    font-size: 0.32rem;
    margin-bottom: 0.12rem;
  }
  .nav-name.on{
    color: #FB685B;
  }
  .line{
    width: 0.72rem;
    height: 0.06rem;
    background: #FB685B;
    border-radius: 0.06rem;
  }
  .comment-item{
    background: #fff;
  }
  .info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.3rem;
  }
  .user{
    display: flex;
    align-items: center;
  }
  .avatar{
    width: 0.8rem;
    height: 0.8rem;
    background: #999;
    border-radius: 0.8rem;
    margin-right: 0.1rem;
  }
  .name-time{
    height: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .name{
    color: #333;
    font-size: 0.3rem;
    font-weight: bold;
  }
  .time{
    color: #999;
    font-size: 0.24rem;
  }
  .place{
    display: flex;
    align-items: center;
    color: #999;
    font-size: 0.24rem;
  }
  .place img{
    width: 0.32rem;
    height: 0.32rem;
    margin-right: 0.1rem;
  }
  .comment-text{
    color: #333;
    font-size: 0.28rem;
    padding: 0.2rem 0.3rem 0.5rem 0.3rem;
  }
  .comment-pic{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 0.3rem;
    margin-bottom: 0.3rem;
  }
  .comment-pic img{
    width: 3.3rem;
    height: 2.1rem;
    background: #999;
    margin-bottom: 0.2rem;
  }
  .act{
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 1rem;
  }
  .act-item{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bfbfbf;
    font-size: 0.28rem;
  }
  .act-item img{
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.1rem;
  }
  .act-line{
    width: 1px;
    height: 0.6rem;
    background: #f5f5f5;
  }
  footer{
    width: 100%;
    height: 1.5rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
  }
  .publish-btn{
    width: 6.9rem;
    height: 0.8rem;
    background: #FB685B;
    border-radius: 0.8rem;
    color: #fff;
    font-size: 0.36rem;
    text-align: center;
    line-height: 0.8rem;
    margin-top: 0.2rem;
  }
</style>

